<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鞋城商品分类页面</title>
		<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="../jquery-weui-build/dist/css/jquery-weui.css">
		<link rel="stylesheet" href="../jquery-weui-build/dist/lib/weui.css">
		<link rel="stylesheet" href="../jquery-weui-build/demos/css/demos.css">
		<link rel="stylesheet" href="../static/css/index.css">
		<style>
			body{
				background: #f5f5f5;
			}
			
			.F_wd_top_con2{width:100%; min-height:4em; background:#fff; border-top:0.1em solid #ccc;}
			
			.F_wd_top_con2_l{width:40%; background:#f2f2f2; float:left;}
			.F_wd_top_con2_l ul li{ line-height:3.2em; text-indent:1em; border-bottom:0.1em solid #f2f2f2;}
			.F_wd_top_con2_r{width:60%;  float:right;}
			.F_wd_top_con2_r ul li{ line-height:3.2em; text-indent:1em;}
			
			.F_wd_top_con2_r_borb1{ border-bottom:0.1em solid #ccc;}
			.F_wd_top_con2_r_borb2{ border-bottom:0.1em solid #2b57ae; color:#2b57ae;}
			
			
			.F_wd_top_con2_l_1{ width:40%; float:left;}
			.F_wd_top_con2_l_1 ul li{ line-height:3.2em; text-indent:1em; }
			.F_wd_top_con2_r_1{ width:55%;  float:right;}
			.F_wd_top_con2_r_1 ul li{ line-height:3.2em; text-indent:1em;}
			
			.F_wd_top_con2_l_2{width:40%; background:#f2f2f2; float:left;}
			.F_wd_top_con2_l_2 ul li{ line-height:3.2em; text-indent:1em; border-bottom:0.1em solid #f2f2f2;}
			.F_wd_top_con2_r_2{width:55%;  float:right;}
			.F_wd_top_con2_r_2 ul li{ line-height:3.2em; text-indent:1em;}
			
			
			.current{background: #fff; color: #2b57ae;}
			.by{display: none;}
			.bg_none {background:none;}
			.displayN {display:none;} 
			.clear {clear:both;}
			
			.float_l {float:left;}
			.float_r {float:right;}
			
			.txtL {text-align:left;}
			.txtC {text-align:center;}
			.txtR {text-align:right;}
			
			.height025 {height:.25em; clear:both;}
			.height05 {height:.5em; clear:both;}
			.height1 {height:1em; clear:both;}
			.height15 {height:1.5em; clear:both;}
			.height13 {height:1.3em; clear:both;}
			.height2 {height:2em; clear:both;}
			.height3 {height:3em; clear:both;}
			.height4 {height:4em; clear:both;}
			 
			.height10{height:7em; clear:both;}
			.font_07 {font-size:0.7em;}
			.font_08 {font-size:0.8em;}
			.font_1_1 {font-size:1.1em;}
			.bold {font-weight:bold;}
			 
			.bg_body {background:#efeff4;}
			.body_over_auto {overflow:auto;}
			/**文字颜色**/
			
			.txt_blue {color:#007aff;}
			.txt_red {color:#fe0a0b;}
			.txt_org {color:#ff7900;} 
			
			/*表单样式*/
			input:focus{outline: none;}
			 
			.width_100 {width:100%; padding-right:0;} 
			.width_5em {width:5em;}
			.width_6em {width:6em;}
			.width_7em {width:7em;}
			.width_10em {width:10em;}
			.width_11em {width:11em;}
			.width_12em {width:12em;}
			.width_15em {width:15em;}
			
			/*按钮*/
			.btn_blue {text-align:center; color:#fff; border-radius:0.4em; line-height:2em; background:#035eb1; padding:0 2em;}
			
			/*复选框样式*/
			 
			/*图标*/
			.icon_time {width:1em; height:1em; background:url(../img/icon_time.png) no-repeat; background-size:100% 100%; margin:0 0.1em -0.1em 0;}
			 
			
			/*顶部样式*/
			.top_tit {background:#2b57ae; height:2.7em; overflow:hidden;} 
			  
			
			/*页面框架*/
			.top_tit{ height:3.3em; background:#2b57ae;}
			.top_tit_center{ width:60%; margin:0 auto; font-size:1.2em; color:#FFF; display:block; text-align:center; height:2.7em; line-height:2.7em;}
			.top_tit_left{  width:1.5em; height:1.5em; float:left; display:block; background:url(../img/top_l_arrow.png) no-repeat; background-size:100% 100%; display:block; margin:0.9em 0 0 0.5em;}
		</style>
	</head>
	<body>
		<div class="Z_con2_2">
		    <div class="F_wd_top_con2">
		        <div class="F_wd_top_con2_l" id="wrapper">
		            <div>
		                <ul class="sy">
		                    <li class="current">精品美食</li>
		                    <li>美容美发</li>
		                    <li>开心购物</li>
		                    <li>生活一查通</li>
		                </ul>
		            </div>
		        </div>
		        <div class="F_wd_top_con2_r" id="wrapper1">
		            <div class="content">
		                 <ul class="by" style="display: block">
		                     <li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">宫保鸡丁</li>
		                     <li class="F_wd_top_con2_r_borb1">酱牛肉</li>
		                     <li class="F_wd_top_con2_r_borb1">北京烤鸭</li>
		                     <li class="F_wd_top_con2_r_borb1">酸菜鱼</li>
		                 </ul>
		            </div>
		            <div class="content">
		                <ul class="by">
		                    <li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">精剪</li>
		                    <li class="F_wd_top_con2_r_borb1">面膜保湿</li>
		                    <li class="F_wd_top_con2_r_borb1">去痘抗痘</li>
		                    <li class="F_wd_top_con2_r_borb1">化妆品</li>
		                </ul>
		            </div>
		            <div class="content">
		                <ul class="by">
		                    <li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">超市购物</li>
		                    <li class="F_wd_top_con2_r_borb1">商场购物</li>
		                </ul>
		            </div>
		            <div class="content">
		                <ul class="by">
		                    <li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">地图</li>
		                    <li class="F_wd_top_con2_r_borb1">充值话费</li>
		                    <li class="F_wd_top_con2_r_borb1">58同城</li>
		                </ul>
		            </div>
		        </div>
		     </div>
		</div>
		
	<script src="../jquery-weui-build/dist/lib/jquery-2.1.4.js"></script>
	<script src="../static/js/jquery.SuperSlide.2.1.js"></script>
	<script src="../jquery-weui-build/dist/js/jquery-weui.js"></script>
	<script src="../jquery-weui-build/dist/js/city-picker.js"></script>	
	<!--拓展组件-->
	
	<script type='text/javascript' src='../jquery-weui-build/dist/js/swiper.js' charset='utf-8'></script>
	<script type='text/javascript' src='../jquery-weui-build/dist/lib/fastclick.js' charset='utf-8'></script>
	<script>
    	//竖直切换
        $(function(){
			window.onload = function()
			{
				var $li = $('.sy li');
				var $ul = $('.content .by');
				$li.click(function(){
					var $this = $(this);
					var $t = $this.index();
					$li.removeClass();
					$this.addClass('current');
					$ul.css('display','none');
					$ul.eq($t).css('display','block');
				})
			}
		});
		
       	$(function(){
		   $(".F_wd_top_con2_r_borb1").click(function(){
			   $(this).addClass("F_wd_top_con2_r_borb2").siblings().removeClass("F_wd_top_con2_r_borb2");
		   })

	   	})
    </script>
	</body>
</html>
